<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<jsp:include page="/includes/top.jsp"></jsp:include>
<div class="page-header">
	<h1></h1>
</div>
<!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<ul class="nav nav-tabs" id="myTab">
			<li class="active"><a href="#tabs-0" data-toggle="tab" data-id="0">全部项目</a></li>
			<li><a href="#tabs-1" data-toggle="tab" data-id="1">未定义</a></li>
			<li><a href="#tabs-2" data-toggle="tab" data-id="2">已提议</a></li>
			<li><a href="#tabs-3" data-toggle="tab" data-id="3">计划中</a></li>
			<li><a href="#tabs-4" data-toggle="tab" data-id="4">进行中</a></li>
			<li><a href="#tabs-5" data-toggle="tab" data-id="5">暂停</a></li>
			<li><a href="#tabs-6" data-toggle="tab" data-id="6">已完成</a></li>
		</ul>
		<div class="tab-content">
			<div id="tabs-0" class="tab-pane fade in active">
				<div class="table-responsive">
					<table id="grid-table-0"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox"
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">完成情况</th>
								<th style="width:12%">公司名称</th>
								<th style="width:12%">项目名称</th>
								<th>项目负责人</th>
								<th>主导部门</th>
								<th>开始时间</th>
								<th>预计完成时间</th>
								<th>目标预算</th>
								<th>实际支出</th>
								<th>项目类别</th>
								<th>优先级</th>
								<th>状态</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-1" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-1"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox"
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">完成情况</th>
								<th style="width:12%">公司名称</th>
								<th style="width:12%">项目名称</th>
								<th>项目负责人</th>
								<th>主导部门</th>
								<th>开始时间</th>
								<th>预计完成时间</th>
								<th>目标预算</th>
								<th>实际支出</th>
								<th>项目类别</th>
								<th>优先级</th>
								<th>状态</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-2" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-2"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox"
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">完成情况</th>
								<th style="width:12%">公司名称</th>
								<th style="width:12%">项目名称</th>
								<th>项目负责人</th>
								<th>主导部门</th>
								<th>开始时间</th>
								<th>预计完成时间</th>
								<th>目标预算</th>
								<th>实际支出</th>
								<th>项目类别</th>
								<th>优先级</th>
								<th>状态</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-3" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-3"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox"
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">完成情况</th>
								<th style="width:12%">公司名称</th>
								<th style="width:12%">项目名称</th>
								<th>项目负责人</th>
								<th>主导部门</th>
								<th>开始时间</th>
								<th>预计完成时间</th>
								<th>目标预算</th>
								<th>实际支出</th>
								<th>项目类别</th>
								<th>优先级</th>
								<th>状态</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-4" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-4"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox"
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">完成情况</th>
								<th style="width:12%">公司名称</th>
								<th style="width:12%">项目名称</th>
								<th>项目负责人</th>
								<th>主导部门</th>
								<th>开始时间</th>
								<th>预计完成时间</th>
								<th>目标预算</th>
								<th>实际支出</th>
								<th>项目类别</th>
								<th>优先级</th>
								<th>状态</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-5" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-5"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox"
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">完成情况</th>
								<th style="width:12%">公司名称</th>
								<th style="width:12%">项目名称</th>
								<th>项目负责人</th>
								<th>主导部门</th>
								<th>开始时间</th>
								<th>预计完成时间</th>
								<th>目标预算</th>
								<th>实际支出</th>
								<th>项目类别</th>
								<th>优先级</th>
								<th>状态</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-6" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-6"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox"
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">完成情况</th>
								<th style="width:12%">公司名称</th>
								<th style="width:12%">项目名称</th>
								<th>项目负责人</th>
								<th>主导部门</th>
								<th>开始时间</th>
								<th>预计完成时间</th>
								<th>目标预算</th>
								<th>实际支出</th>
								<th>项目类别</th>
								<th>优先级</th>
								<th>状态</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<jsp:include page="/includes/bottom.jsp"></jsp:include>

<script type="text/javascript">
	var columns = [	{
						"data" : "projectId",
						"fnCreatedCell" : function(nTd, sData, oData, iRow, iCol) {
							$(nTd).html("<input type='checkbox' name='checkList' value='" + sData + "' class='ace'><span class='lbl'></span>");
						}
					},
					{	
						"data" : "projectPercentComplete",
						"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
						       $(nTd).html("<div class='progress progress-striped'> "+
						       		"<div class='progress-bar progress-bar-success' role='progressbar' "+
						       		"aria-valuenow='"+oData.projectPercentComplete+"' aria-valuemin='0' aria-valuemax='100' style='width: "+oData.projectPercentComplete+"%;'>"+
						   			"<span >"+oData.projectPercentComplete+"%</span> </div></div>");
						 }
					},
					{"data": "projectCompanyName"},
					{
						"data": "projectId",
					    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
						       $(nTd).html("<a href='Projects/projectsdetail.jsp?m="+mid+"&id="+sData+"'>"+oData.projectName+"</a>");
						}
					},
					{"data" : "userinfoTruename"},
					{"data" : "projectDepartmentName"},
					{"data" : "projectStartDate"},
					{"data" : "projectEndDate"},
					{"data" : "projectTargetBudget"},
					{"data" : "projectActualBudget"},
					{"data" : "projectTypeName"},
					{"data" : "projectPriorityName"},
					{"data" : "projectStatusName"}];
	
	
	$(document).ready(function() {
		$("#myTab a").click(function (e) { 
			setCookie("projecttab",$(this).attr("data-id"));
        });
		var num = getCookie("projecttab");
		$("#myTab li:eq("+num+") a").tab("show"); 
		//checkbox全选
	    $(".checkAll").on("click", function () {
	        var num = getCookie("projecttab");
	        num = num == "" ? 0 : num;
	        if ($(this).prop("checked")) {
	            $("#tabs-"+num+" input[name='checkList']").prop("checked", true);
	        } else {
	            $("#tabs-"+num+" input[name='checkList']").prop("checked", false);
	        }
	    });
	
		var dataMap = null;
		//所有
		$('[href^="#tabs-"]').each(function(index) {
			if (index == 0) {
				dataMap = {ProjectStatus : ''};
			} else {
				dataMap = {ProjectStatus : index};
			}
			//参数说明：id,url,data,column,length			
			tableload("grid-table-" + index,"projectslist",dataMap,columns,15);
		});
	});
	
	function getSelected(){
		var str = '';
		var num = getCookie("projecttab");
		num = num == "" ? 0 : num;
	    $("#tabs-"+num+" input[name='checkList']:checked").each(function () {
	        str += $(this).val();
	        str += ",";
	    });
	    str = str.substr(0, str.length - 1);
	    return str;
	}
	function _addFun() {
		window.open("projectsform?m=" + mid, "_self");
	}
	function _editFun(){
		var str = getSelected();
		if (str != '' && str.indexOf(",") < 0) {
			window.open("projectsform?m=" + mid + "&projects.projectId=" + str, "_self");
		} else {
			alert("请选择一条记录操作");
		}
	}
	function _delFun(){
	    var str = getSelected();
		if (str != '' && str.indexOf(",") < 0) {
			if (confirm("确定要删除数据吗？")) {
				$.ajax({
					type : "post",
					url : "delprojects",
					data : {'projects.projectId':str},
					success : function(data) {
					   	showDelMessage(data);
						window.open("Projects/projectslist.jsp?m="+mid,"_self");
					}
				});
			}
		} else {
			alert("请选择一条记录操作");
		}
	}
</script>
